<template>
  <div class="ds-time absolute top-12 z-10 right-5 h-6 w-auto">
    <div class="font-mono font-sans text-xl text-white">{{time}}</div>
    <ds-progress v-if="datetime.progress" :timeout="datetime.progress.timeout" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onUnmounted, inject } from 'vue'
import { format } from 'date-fns'
import DsProgress from './DsProgress.vue';
export default defineComponent({
  name: 'DsTime',
  components: {DsProgress},
  props: {
    format: {
      type: String,
      default: 'yyyy/MM/dd HH:mm:ss'
    }
  },
  setup(props) {
    let tid: number = 0
    const time = ref<string>('')
    const { datetime } = inject('Config')
    const _timer = () => {
      time.value = format(new Date(), props.format)
      tid = setTimeout(_timer, 1000)
    }
     _timer()
    onUnmounted(() => {
      clearTimeout(tid)
    })
    return {
      time,
      datetime
    }
  },
})
</script>
